import { Component, useState } from 'react'
import Card from './template/CardTemplate'
import './app.css'
import Navigation from './template/navigationTemplate';
import DataContent from './template/DataContent';
import DescContent from './template/DescTemplate';
import Export from './api/exportApi';
export default class App extends Component {
  constructor() {
    
    super();
    this.state_1 = {
      width: "28%",
      background: "linear-gradient(to right, rgba(48,95,236,0.7), rgba(48,95,236,1))",
      height: "15vh",
      border: "1px solid #fff"
    }
    this.state_2 = {
      width: "28%",
      background: "linear-gradient(to right, rgba(211,83,133,0.7), rgba(211,83,133,1))",
      height: "15vh",
      border: "1px solid #fff"
    }
    this.state_3 = {
      width: "28%",
      background: "linear-gradient(to right, rgba(165,48,242,0.7), rgba(165,48,242,1))",
      height: "15vh",
      border: "1px solid #fff"
    }
    this.state = {
      descItem:{},
      username:"",
      authority:'管理员',
      money:1000000
    }
    // this.reviceCallback = this.reviceCallback.bind(this)
  }
  queryUserItem = async () => {
    let id = localStorage.getItem("userId")
    let form = new FormData()
    form.append("id",id)
    let {data} = await Export.queryUserItem(form)
    this.setState({username:data.username,money:data.money,authority:data.authority === 1 ? '管理员':'普通用户'})
  }

  componentDidMount=()=>{
    this.queryUserItem()
  }
  reviceCallback=(data)=>{
    let result = data[0];
    let res = JSON.parse(result)
    this.setState({descItem:{...res}})
  }
  render() {
    return (
      <>
        <div className='Content'>
          <div className='navigation'>
            <Navigation></Navigation>
          </div>
          <div className='rightContent'>
            <div className="navTitle">
                <div className="user">
                    <h2>账号：{this.state.username}</h2>
                    <h2>余额：{this.state.money}</h2>
                    <h2>身份：{this.state.authority}</h2>
                </div>
            </div>
            <div className='CardContent'>
              <Card title={`商品总数`} width={this.state_1.width} background={this.state_1.background} height={this.state_1.height} border={this.state_1.border}></Card>
              <Card title={`已售商品`} width={this.state_2.width} background={this.state_2.background} height={this.state_2.height} border={this.state_2.border}></Card>
              <Card title={`未售商品`} width={this.state_3.width} background={this.state_3.background} height={this.state_3.height} border={this.state_3.border}></Card>
            </div>
            <div className="dataContent">
              <DataContent reviceData={this.reviceCallback}></DataContent>
              <DescContent reviceDesc={this.state.descItem}></DescContent>
            </div>
          </div>
        </div>
      </>
    )
  }
}
